<template>
    <div id="comment">
        <div class="comment-flex">
            <div class="c-left">评论(69)</div>
            <div class="c-right">好评度 <span>100%</span></div>
        </div>
        <div class="comment-box">
            <div class="comment-box-flex">
                <div>
                    <img src="../../static/img/人.png" alt="">
                    <span>微笑流</span>
                    <span class="star star5"></span>
                </div>
                <div class="c-right">2017-09-29</div>
            </div>
            <p>茶还没喝，包装很有特色</p>
        </div>
        <div class="comment-box">
            <div class="comment-box-flex">
                <div>
                    <img src="../../static/img/人.png" alt="">
                    <span>dwj**iy</span>
                    <span class="star star5"></span>
                </div>
                <div class="c-right">2017-09-21</div>
            </div>
            <p>好喝，还是一样好</p>
        </div>
        <div class="look">查看更多评论</div>
    </div>
</template>
<script>
import {mapState} from "vuex";
export default {
    computed:{
        ...mapState([
            "product",
        ]),
    },
}
</script>
<style scoped>
    #comment{
        padding: 2.8vw 0;
    }
    .comment-flex{
        display: flex;
        justify-content: space-between;
        border-bottom: #eee solid 1px;
        padding:  2.8vw 0;
    }
    .c-left{
        font-size: 3.92vw;
    }
    .c-right{
        font-size: 3.36vw;
        color: #b0b0b0;
    }
    .c-right span{
        color: red;
    }
    .comment-box{
        padding: 2.8vw 0;
        font-size: 3vw;
        border-bottom: #eee solid 1px;
    }
    .comment-box-flex{
        display: flex;
        justify-content: space-between;
    }
    p{
        color:#333;
    }
    img{
        width: 3vw;
        height: 3vw;
    }
    .star{
        display: inline-block;
        width: 70px;
        height: 14px;
        background-image: url(../../static/img/stars.png) ;
        vertical-align: middle;
        margin-left: 2.8vw;
    }
    .star5{
        background-position: 0 0px;
    }
    .look{
        text-align: center;
        color: #ff3600;
        padding: 2.8vw 0;
    }
</style>